<template>
  <!--pages/customerDetail/customerDetail.wxml-->
  <view id="customer-detail">
    <view class="detail-head">
      <view class="detail-main">
        <view class="main-top">
          <h5>
            <image :src="'/static/imgs/wechat.png'" alt="微信"></image>
            微信
          </h5>
          <image :src="singleCustomer.avatarUrl" alt="头像"></image>
        </view>
        <view class="main-bottom">
          <h3>{{singleCustomer.nickName}}</h3>
          <image :src="singleCustomer.gender === 0 ? '/static/imgs/male.png' : '/static/imgs/female.png'"></image>
        </view>
      </view>
    </view>
    <view class="detail-set" v-if="$store.state.user.userInfo.permit !== 0">
      <van-cell is-link class="no-finish" @click="toCustomerNote">
        <!-- 使用 title 插槽来自定义标题 -->
        <view slot="title">
          <span class="custom-title">编辑信息</span>
        </view>
      </van-cell>
    </view>
    <view class="detail-time">
<!--      <van-cell>
        &lt;!&ndash; 使用 title 插槽来自定义标题 &ndash;&gt;
        <view slot="title">
          <view class="time-main">
            <span class="custom-title">备注</span>
            <span class="time-title">{{ singleCustomer.createTime }}</span>
          </view>
        </view>
      </van-cell>-->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <view slot="title">
          <view class="time-main">
            <span class="custom-title">添加时间</span>
            <span class="time-title">{{ singleCustomer.createdAt }}</span>
          </view>
        </view>
      </van-cell>
    </view>
    <view class="operation">
      <van-button type="default" block @click="cancelCare" v-if="$store.state.user.userInfo.attentionIds.includes(singleCustomer.id)">
        取消关注
      </van-button>
      <van-button type="primary" block @click="careUser" v-else>
        关注用户
      </van-button>
      <view style="margin-top: 20upx;"></view>
      <van-button type="danger" block @click="deleteUser">
        删除用户
      </van-button>
    </view>
  </view>
</template>

<script>
import {showModal} from "../../static/utils";
import {reqBatchCare, reqCancelCare, reqDeleteUsers, reqUserInfo} from "../../api/user";
import {USER_DETAIL, USER_INFO} from "../../store/mutation-types";

export default {
name: "userDetail",
  data () {
   return {}
  },
  methods: {
    deleteUser () {
      showModal({
        title: '删除用户',
        content: '确定删除此用户吗?',
        success: res => {
          if (res.confirm){
            reqDeleteUsers({
              ids: this.singleCustomer.id.join(',')
            }).then(() => {
              uni.showToast({
                title: '删除成功!'
              })
              uni.navigateBack({
                delta: -1
              })
            })
          }
        }
      })
    },
    async getUserInfo () {
      const result = await reqUserInfo({
        id: this.$store.state.user.userInfo.id
      })
      const data = result.data;

      this.$store.commit(USER_INFO, data.messageBody);
    },
    toCustomerNote () {
      uni.navigateTo({
        url: '/pages/userAdd/userAdd'
      })
    },
    careUser () {
      reqBatchCare({
        ids: this.singleCustomer.id
      }).then(() => {
        uni.showToast({
          title: '关注成功!'
        })
        this.getUserInfo();
      })
    },
    cancelCare () {
      reqCancelCare({
        ids: this.singleCustomer.id
      }).then(() => {
        uni.showToast({
          title: '取消关注成功!'
        })
        this.getUserInfo();
      })
    }
  },
  computed: {
    singleCustomer () {
       return this.$store.state.user.userDetail;
     }
  }
}
</script>

<style lang="less">
/* pages/customerDetail/customerDetail.wxss */
#customer-detail {
  background: #F2F2F2;
  min-height: 100vh;
}
#customer-detail .detail-head {
  padding: 0.8rem;
}
#customer-detail .detail-main {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 1rem;
}
#customer-detail .detail-main .main-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
#customer-detail .detail-main .main-top image {
  width: 3.5rem;
  height: 3.5rem;
}
#customer-detail .detail-main .main-top h5 {
  font-size: 1rem;
  color: #73747A;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 600;
}
#customer-detail .detail-main .main-top h5 image {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  margin-top: 0rem;
}
#customer-detail .detail-main .main-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 3rem;
  font-size: 1rem;
  justify-content: space-between;
  width: 100%;
}
#customer-detail .detail-main .main-bottom h3 {
  width: 80%;
  overflow: hidden;
  text-overflow: clip;
  text-align: left;
  font-weight: 600;
}
#customer-detail .detail-main .main-bottom image {
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.3rem;
  margin-top: 0.15rem;
}
#customer-detail .detail-set,
#customer-detail .detail-time {
  text-align: left;
}
#customer-detail .detail-set .van-cell,
#customer-detail .detail-time .van-cell {
  font-size: 15px;
}
#customer-detail .detail-set .time-title,
#customer-detail .detail-time .time-title {
  margin-left: 0.6rem;
}
#customer-detail .detail-time {
  margin-top: 0.8rem;
}
#customer-detail .operation {
  padding: 0.8rem;
}
/*# sourceMappingURL=home.css.map */
</style>